<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@200&display=swap" rel="stylesheet">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-size: cover;
            background: #030829  center;
        }

        .frosted-glass {
            position: fixed;
            top: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 30%;
            height: 50%;
            /*border-bottom: 4px solid #4b8df8;*/
            box-shadow: -10px 0px 15px #034c6a inset, /*å·¦è¾¹é˜´å½±*/
            0px -10px 15px #034c6a inset, /*ä¸Šè¾¹é˜´å½±*/
            10px 0px 15px #034c6a inset, /*å³è¾¹é˜´å½±*/
            0px 10px 15px #034c6a inset;

            box-sizing: border-box;
            backdrop-filter: blur(20px);
            transition: 0.5s ease;
        }
        /*.frosted-glass:hover {*/
        /*    box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.157), 0 1.7px 2.6px rgba(0, 0, 0, 0.224), 0 3.5px 5.3px rgba(0, 0, 0, 0.28), 0 7.3px 11px rgba(0, 0, 0, 0.346), 0 20px 30px rgba(0, 0, 0, 0.5);*/
        /*}*/
        .frosted-glass .title {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5px;
            font-size: 3.6em;
            font-family: Lato, sans-serif;
            font-weight: 200;
            letter-spacing: 0.75em;
            color: white;
            /*background-color: #072951;*/
            /*box-shadow: -10px 0px 15px #034c6a inset,*/
            /*10px 0px 15px #034c6a inset;*/

        }

        .frosted-glass .form-label {
            color: white; /* 将文本颜色设为白色 */
        }
        .frosted-glass .btn.btn-outline-primary {
            color: white; /* 将按钮文本颜色设为白色 */
            margin-right: 50%;
            width: 150px; /* 设置按钮宽度 */
            height: 50px; /* 设置按钮高度 */
            font-size: 16px; /* 设置字体大小 */
            padding: 10px 20px; /* 设置内边距 */
        }
        .frosted-glass.btn{
            text-align: right; /* 文字或子元素右对齐 */
        }


    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
<body>
<canvas></canvas>

<div class="frosted-glass">

    <div class="card-body">
        <div class="title">
            <h2 class="find_button">助盲系统</h2>
        </div>
        <div class="alert alert-danger" role="alert" th:if="${param.error}">
            Oops!!<br> 账号或密码输入错误！ :(
        </div>
        <div class="alert alert-success" role="alert" th:if="${param.logout}">
            Hey!!<br> You have been logged out
        </div>
        <form action="#" th:action="@{/UserAuthentication}" method="post" class="table_style">
            <div class="form-outline mb-4">
                <input type="tel" name="username" id="form2Example1" class="form-control" />
                <label class="form-label" for="form2Example1">账号</label>
            </div>
            <div class="form-outline mb-4">
                <input type="password" name="password" id="form2Example2" class="form-control" />
                <label class="form-label" for="form2Example2">密码</label>
            </div>
            <div>
                <button type="submit" class="btn btn-outline-primary">登录</button>
            </div>
        </form>
    </div>
</div>



<script>
    $(function () {
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');

        // 动态设置 Canvas 的尺寸
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        ctx.lineWidth = 0.3;
        ctx.strokeStyle = (new Color(150)).style;

        var mousePosition = {
            x: 30 * canvas.width / 100,
            y: 30 * canvas.height / 100
        };

        var dots = {
            nb: 550,
            distance: 50,
            d_radius: 100,
            array: []
        };

        function colorValue(min) {
            return Math.floor(Math.random() * 255 + min);
        }

        function createColorStyle(r, g, b) {
            return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
        }

        function mixComponents(comp1, weight1, comp2, weight2) {
            return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
        }

        function averageColorStyles(dot1, dot2) {
            var color1 = dot1.color,
                color2 = dot2.color;

            // var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
            //     g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
            //     b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
            return createColorStyle(255,255,255);
        }

        function Color(min) {
            min = min || 0;
            this.r = 255;
            this.g = 255;
            this.b = 255;
            this.style = createColorStyle(this.r, this.g, this.b);
        }

        function Dot() {
            this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;

            this.vx = -0.5 + Math.random();
            this.vy = -0.5 + Math.random();

            this.radius = Math.random() * 2;

            this.color = new Color();
        }

        Dot.prototype = {
            draw: function () {
                ctx.beginPath();
                ctx.fillStyle = this.color.style;
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                ctx.fill();
            }
        };

        function createDots() {
            for (var i = 0; i < dots.nb; i++) {
                dots.array.push(new Dot());
            }
        }

        function moveDots() {
            for (var i = 0; i < dots.nb; i++) {
                var dot = dots.array[i];

                if (dot.y < 0 || dot.y > canvas.height) {
                    dot.vx = dot.vx;
                    dot.vy = -dot.vy;
                } else if (dot.x < 0 || dot.x > canvas.width) {
                    dot.vx = -dot.vx;
                    dot.vy = dot.vy;
                }
                dot.x += dot.vx;
                dot.y += dot.vy;
            }
        }

        function connectDots() {
            for (var i = 0; i < dots.nb; i++) {
                for (var j = 0; j < dots.nb; j++) {
                    var i_dot = dots.array[i];
                    var j_dot = dots.array[j];

                    if ((i_dot.x - j_dot.x) < dots.distance &&
                        (i_dot.y - j_dot.y) < dots.distance &&
                        (i_dot.x - j_dot.x) > -dots.distance &&
                        (i_dot.y - j_dot.y) > -dots.distance) {
                        if ((i_dot.x - mousePosition.x) < dots.d_radius &&
                            (i_dot.y - mousePosition.y) < dots.d_radius &&
                            (i_dot.x - mousePosition.x) > -dots.d_radius &&
                            (i_dot.y - mousePosition.y) > -dots.d_radius) {
                            ctx.beginPath();
                            ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
                            ctx.moveTo(i_dot.x, i_dot.y);
                            ctx.lineTo(j_dot.x, j_dot.y);
                            ctx.stroke();
                            ctx.closePath();
                        }
                    }
                }
            }
        }

        function drawDots() {
            for (var i = 0; i < dots.nb; i++) {
                var dot = dots.array[i];
                dot.draw();
            }
        }

        function animateDots() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            moveDots();
            connectDots();
            drawDots();

            requestAnimationFrame(animateDots);
        }

        $('canvas').on('mousemove', function (e) {
            mousePosition.x = e.pageX;
            mousePosition.y = e.pageY;
            mousePosition.z = -1;
        });

        $('canvas').on('mouseleave', function (e) {
            mousePosition.x = canvas.width / 2;
            mousePosition.y = canvas.height / 2;
        });

        createDots();
        requestAnimationFrame(animateDots);
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
